// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'
// import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
// import { HashRouter as Router, Route, Link } from 'react-router-dom'
import {
    BrowserRouter,
    Routes,
    Route,
    Link
} from 'react-router-dom'




// 引入css文件
import "./index.css"


// React路由介绍
// 现代的前端应用太多都是SPA(单页应用程序)
// 也就是只是HTML页面的应用程序 因为他的用户体验更好
// 对服务器压力更小 所有更受欢迎
// 为了有效的使用单个页面来管理原理更多页面的功能
// 前端路由应运而生

// 前端路由的功能：让用户从一个视图（页面） 导航到另外一个视图（页面）
// 前端路由是一套映射规则 在React中 是URL路径 和组件的对应关系
// 使用React路由简单来说 就是配置路径和组件(匹配)


// 1. 安装路由 npm add react-router-dom
// 2. 导入组件 import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
// 3. 使用Router 组件包裹整个应用


// 基本使用


class List extends React.Component {
    render() {
        return
        (
            <div>
                <h1>页面一内容</h1>
            </div>
        )
    }
}


class Login extends React.Component {
    return = () => {
        this.props.history.go(-1)
    }
    handlerLogin = () => {
        this.props.history.push("/list")
    }
    render() {
        return (
            <div>
                <h1>这是登录页面</h1>
                <button onClick={this.return}>返回</button>
                <button onClick={this.handlerLogin}>去登录</button>
            </div>
        )
    }
}

class Home extends React.Component {
    render() {
        return (
            <div>
                <p>这里是首页</p>
            </div>
        )
    }
}


class App extends React.Component {
    render() {
        return (
            <BrowserRouter>
                <div>
                    <ul>
                        <li><Link to="/">首页11</Link></li>
                        <li><Link to="/login/">登录</Link></li>
                    </ul>
                    <Routes>
                        <Route path="/" exact element={<Home />} />
                        <Route path="/login/" element={<Login />} />
                        <Route path="/list/" element={<List />} />
                    </Routes>
                </div>
            </BrowserRouter>

        )
    }
}


//3 渲染react元素
ReactDOM.render(
    <App />,
    document.getElementById('root'))
